<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>预约服务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        .content{}
        .content ul{}
        .content ul li{position: relative;line-height: 30px;padding: 10px;overflow: hidden;font-size: 14px;}
        .content ul li .left{float: left;color: #666;width: 25%;}
        .content ul li .left span{display: block;width: 100%;}
        .content ul li .right{float: right;color: #333;width: 75%;overflow: hidden;position: relative;}
        .content ul li .right span{float: right;color: #666;}
        .content ul li .right p{padding-left: 10px;color: #333;font-size: 16px;}
        .content ul li .select select{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .select span{float: right;color: #666;}
        .content ul li .input{height: 30px;}
        .content ul li .input label{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;z-index: 3;}
        .content ul li .input label input{background-color: transparent;}
        .content ul li .input span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;text-align: right;}
        .content ul li .right .area{padding-left: 3%;}
        .content ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}

        .input-group{border-top: 10px solid #ecebf0;border-bottom: 10px solid #ecebf0;}
        .a-title{padding: 15px 10px;color: #333;}
        .input-group ul li{position: relative;line-height: 24px;padding: 6px 10px;overflow: hidden;font-size: 14px;}{}

        .textarea{padding: 10px;}
        .textarea textarea{display: block;width: 100%;font-size: 13px;color: #666;}

        .talk .a-title{padding: 15px 10px 0;}

        .bottom{background-color: #eeedf3;padding: 15px;}
        .bottom div{}
        .bottom div span{display: block;margin-bottom: 4px;font-size: 12px;color: #999;}
        .bottom div p{margin: 5px 0;font-size: 11px;color: #999;}
        footer{height: 50px;}
        footer div{position: fixed;left: 0;bottom: 0;width: 100%;}
        footer div a{display: block;line-height: 50px;color: #fff;font-size: 18px;background-color: #ffc10c;text-align: center;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">预约服务</div>
    </div>
</header>
<div class="content">
    <ul>
        <li class="bottom-line">
            <div class="left">
                <span class="name">服务类型:</span>
            </div>
            <div class="right select job">
                <select>
                    <option>模特</option>
                    <option>丽人</option>
                    <option>摄影</option>
                    <option>设计</option>
                    <option>生活服务</option>
                    <option>语言练习</option>
                    <option>专业咨询</option>
                    <option>影视表演</option>
                </select>
                <span><i class="iconfont icon-arrow_right"></i></span>
            </div>
        </li>
    </ul>
    <div class="input-group">
        <p class="a-title">我要预约</p>
        <ul>
            <li class="top-line bottom-line">
                <div class="left">
                    <span class="name">价格</span>
                </div>
                <div class="right input high">
                    <label>
                        <input type="text" placeholder="请输入" maxlength="5"/>
                    </label>
                    <span><i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">时间</span>
                </div>
                <div class="right input high">
                    <label>
                        <input type="number" placeholder="请输入" maxlength="11"/>
                    </label>
                    <span><i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">所在区域</span>
                </div>
                <div class="right">
                    <label class="area">
                        <select id="s_province" class="prov">
                            <option value="0">选择省份</option>
                        </select>
                        <select id="s_city" class="city">
                            <option value="0">选择城市</option>
                        </select>
                        <select id="s_county" class="district">
                            <option value="0">选择地区</option>
                        </select>
                    </label>
                </div>
            </li>
        </ul>
        <div class="textarea">
            <textarea rows="3" placeholder="请输入详细地址，不少于5个字"></textarea>
        </div>
    </div>
    <div class="talk">
        <p class="a-title">我有话说</p>
        <div class="textarea">
            <textarea rows="3" placeholder="您有什么想对出租人说的，尽情吐露吧（可以不填）"></textarea>
        </div>
    </div>
</div>
<div class="bottom">
    <div>
        <span>备注：</span>
        <p>1.您的预约将会推送给出租人</p>
        <p>2.为保障您的隐私不受干扰，在达成交易之前，请不要发布您的个人联系方式或违禁信息，否则审核将不通过</p>
        <p>3.如有疑问，请联系客服</p>
    </div>
</div>
<footer>
    <div>
        <a href="">提交预约</a>
    </div>
</footer>
</body>
<script>
    _init_area();
</script>
</html>